.paper {
  position: relative;
  display: inline-block;
  background: transparent;
  overflow: hidden;
  cursor: default;

}

.joint-paper.joint-theme-default{
  overflow:hidden;
}
.paper svg {
  background: transparent;
  position: relative;
  z-index: 0;


}

.footer {
  display: flex;
  cursor: default;
  position: absolute;
  bottom: 0;
  width: 100%;
  min-height: 47px;
  border-top: 1px solid #d5dadd;
  z-index: 1501;
}

.breadcrumbs-container {
  display: flex;
  align-items: center;
  flex: 1;
}

.board-container {
  display: flex;
  align-items: center;
  padding: 0 15px;
}

.fpga-resources {
  color: #777;
}

.fpga-resources span {
  margin-right: 20px;
}

.breadcrumb {
  margin: 0;
  background-color: #f5f6f7;
}

.breadcrumb>.active {
  color: #333;
}

.breadcrumb>li>a:hover {
  text-decoration: none;
}

.banner {
  position: relative;
}
.banner-submodule {
  position: relative;
}


.info {
  position: absolute;
  top: 10px;
  left: 15px;
  font-size: 15px;
  color: #656565;
  background-color: white;
  border-radius: 5px;
  cursor: default;
  z-index: 1501;
}

.read-only {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 14px;
  color: #f05c5c;
  background-color: white;
  border-radius: 5px;
  cursor: default;
  z-index: 1501;
}

.edit-button {
  position: absolute;
  top: 40px;
  right: 100px;
  font-size: 14px;
  color: #63afcf;
  background-color: white;
  border-radius: 5px;
  cursor: pointer;
  z-index: 1501;
}

.edit-button:hover {
  text-decoration: none;
}


.back-button {
  position: absolute;
  top: 40px;
  right: 15px;
  font-size: 14px;
  color: #63afcf;
  background-color: white;
  border-radius: 5px;
  cursor: pointer;
  z-index: 1501;
}

.back-button:hover {
  text-decoration: none;
}

.disable-graph {
  pointer-events: none;
}

.block-disabled {
  opacity: 0.4;
}

g {
  fill: transparent;
  transition: opacity 0.2s;
}

.disable-port {
  pointer-events: none;
}

.port-default {
  pointer-events: none;
}

.port-label {
  pointer-events: none;
}

.generic-block {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.2s;
}

.generic-block .generic-content {
  position: absolute;
  background: #C0DFEB;
  border-radius: 5px;
  border: 1px solid #777;
}

.generic-block .generic-content .clock {
  position: absolute;
}

.generic-block .generic-content .tooltiptext {
  visibility: hidden;
  width: 120px;
  color: #333;
  background-color: white;
  border: 1px solid #777;
  text-align: center;
  border-radius: 5px;
  padding: 5px 5px;
  position: absolute;
  bottom: 100%;
  margin-bottom: 20px;
  left: 50%;
  margin-left: -60px;
}

.generic-block .generic-content .tooltiptext::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: #777 transparent transparent transparent;
}

.generic-block .generic-content .tooltip-medium {
  width: 180px;
  margin-left: -90px;
}

.generic-block .generic-content .tooltip-large {
  width: 240px;
  margin-left: -120px;
}

.config-block {
  background: #fafacd !important;
}

.generic-block .generic-content .img-container {
  position: absolute;
  margin: auto;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
}

.generic-block .generic-content img {
  width: 100%;
  height: 100%;
}

.generic-block .generic-content label {
  display: block;
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
  color: #333;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.io-block {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.2s;
}

.io-block .io-virtual-content {
  position: absolute;
  background: #E2FBC9;
  border-radius: 5px;
  border: 1px solid #777;
}

.io-block .io-virtual-content .header {
  display: flex;
  padding: 0 6px;
  margin-top: 8px;
  height: 18px;
}

.io-block .io-virtual-content .header label {
  flex-grow: 1;
  height: 100%;
  text-align: center;
  font-size: 14px;
  font-weight: normal;
  line-height: 18px;
  color: #222;
  text-overflow: ellipsis;
  overflow: hidden;
}

.io-block .io-virtual-content .header svg {
  padding-left: 2px;
  padding-right: 2px;
  width: 10px;
  stroke: #444;
}

.io-block .io-fpga-content {
  position: absolute;
  width: 100%;
  background: #FBFBC9;
  border-radius: 5px;
  border: 1px solid #777;
}

.io-block .io-fpga-content .header {
  display: flex;
  padding: 0 6px;
  margin-top: 6px;
  height: 18px;
}

.io-block .io-fpga-content .header label {
  flex-grow: 1;
  height: 100%;
  text-align: center;
  font-size: 14px;
  font-weight: normal;
  line-height: 18px;
  color: #222;
  text-overflow: ellipsis;
  overflow: hidden;
}

.io-block .io-fpga-content .header svg {
  padding-left: 4px;
  padding-right: 0px;
  width: 10px;
  stroke: #444;
}

.io-block .io-fpga-content div .select2 {
  position: relative;
  width: 82px;
  min-width:82px;
  top: 6px;
  left: 6px;
  margin-bottom: 6px;
  pointer-events: auto;
}

.select2-selection {
  font-size: 13px;
  height: 26px !important;
}

.select2-selection__rendered {
  line-height: 24px !important;
}

.select2-selection__clear {
  color: #777;
}

.select2-container--default .select2-selection--single {
  outline: none;
  border: 1px solid #AAA;
}

.select2-dropdown {
}

.select2-dropdown .select2-search__field {
  outline: none;
  border-radius: 3px;
  border: 1px solid #777;
}

.bigdrop {
  font-size: 13px;
  width: 92px !important;
}

.constant-block {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.2s;
}

.constant-block .constant-content {
  position: absolute;
  background: #FBF0C9;
  border-radius: 5px;
  border: 1px solid #777;
}

.constant-block .constant-content .header {
  display: flex;
  padding: 0 6px;
  margin-top: 6px;
  height: 18px;
}

.constant-block .constant-content .header label {
  flex-grow: 1;
  height: 100%;
  text-align: center;
  font-size: 14px;
  font-weight: normal;
  line-height: 18px;
  color: #222;
  text-overflow: ellipsis;
  overflow: hidden;
}

.constant-block .constant-content .header svg {
  padding-left: 2px;
  padding-right: 2px;
  width: 10px;
  fill: #444;
}

.constant-block .constant-content input {
  position: absolute;
  text-align: center;
  left: 6px;
  bottom: 6px;
  width: 82px;
  height: 26px;
  font-size: 14px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
  line-height: 15px;
  border-radius: 4px;
  border: 1px solid #AAA;
  pointer-events: auto;
}

.constant-block .constant-content input:focus {
  outline: none;
}

.memory-block {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.2s;
}

.memory-block .memory-content {
  position: absolute;
  background: #FBF0C9;
  border-radius: 5px;
  border: 1px solid #777;
}

.memory-block .memory-content .header {
  display: flex;
  padding: 0 6px;
  margin-top: 6px;
  height: 18px;
}

.memory-block .memory-content .header label {
  flex-grow: 1;
  height: 100%;
  text-align: center;
  font-size: 14px;
  font-weight: normal;
  line-height: 18px;
  color: #222;
  text-overflow: ellipsis;
  overflow: hidden;
}

.memory-block .memory-content .header svg {
  padding-left: 2px;
  padding-right: 2px;
  width: 10px;
  fill: #444;
}

.memory-block .memory-editor {
  position: absolute;
  top: 24px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 7px;
  border-radius: 5px;
  border: 1px solid #AAA;
  pointer-events: auto;
}

.code-block {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.2s;
}

.code-block .code-content {
  position: absolute;
  background: #C0DFEB;
  border-radius: 5px;
  border: 1px solid #777;
}

.code-block .code-editor {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 7px;
  border-radius: 5px;
  border: 1px solid #AAA;
  pointer-events: auto;
}

.info-block {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.2s;
}

.info-block .info-content {
  position: absolute;
  background: #DDD;
  border-radius: 5px;
  border: 1px solid #777;
}

.info-block .info-editor {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 6px;
  border-radius: 5px;
  border: 1px solid #AAA;
  pointer-events: auto;
}

.info-block-readonly {
  background: transparent;
  border: 1px solid transparent;
}

.info-block .info-render {
  position: absolute;
  overflow: visible;
  background: transparent;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  pointer-events: none;
  overflow: visible;
}

.info-block .info-render a {
  pointer-events: all;
}

.info-block .info-render details {
  pointer-events: all;
}

.info-block .info-render input[type=checkbox] {
  position: absolute;
  margin: 0.4em 0 0 -1.3em;
}

.joint-highlight-stroke.joint-theme-default {
  display: none;
}

.highlight-error {
  background: #c75c5c !important;
}

.sticker-error{

  position:absolute;
  top:-10px;
  right:-10px;
  z-index:10;
  width:38px;
  height:38px;
  background: url(../resources/images/alert.svg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.sticker-error.error-code-editor{
top:-27px;
right:-27px;
}

.highlight-yellow {
  box-shadow: 0 0 8px 8px rgba(248, 248, 160, 0.5);
}

.highlight-green {
  box-shadow: 0 0 8px 8px rgba(217, 250, 184, 0.5);
}

.highlight-orange {
  box-shadow: 0 0 8px 8px rgba(250, 235, 184, 0.5);
}

.highlight-blue {
  box-shadow: 0 0 8px 8px rgba(216, 235, 243, 0.5);
}

.highlight-gray {
  box-shadow: 0 0 8px 8px rgba(221, 221, 221, 0.5);
}

.selection.selected {
  background-color: transparent;
  border: none;
  opacity: 1;
  cursor: move;
  /* Position the selection rectangle static so that the selection-boxes are contained within
   the paper container (which is supposed to be positioned relative). The height 0 !important
   makes sure the selection rectangle is not-visible, only the selection-boxes inside it (thanks to overflow: visible). */
  position: static;
  height: 0 !important;
}

.selection-area {
  position: absolute;
  border: 1px solid rgba(42, 118, 198, 1);
  background-color: rgba(42, 118, 198, 0.2);
  overflow: visible;
  z-index: 1500;
}

.selection-box {
  position: absolute;
  border: 1px dotted rgba(42, 118, 198, 1);
  background-color: rgba(42, 118, 198, 0.2);
  border-radius: 5px;
  z-index: 1500;
}

.selection-box-transparent {
  position: absolute;
  border-radius: 5px;
  z-index: 1500;
}

/* Wires makers */

.link.joint-theme-default .connection-wrap {
  stroke: #777;
  stroke-width: 14;
  cursor: pointer;
  opacity: 0;
}

.link.joint-theme-default .link-tools .tool-remove circle {
  fill: #ff333a;
}
.link.joint-theme-default .link-tools .tool-remove path {
  fill: #FFF;
}

.link.joint-theme-default .marker-arrowhead {
  fill: #AAA;
}
.link.joint-theme-default .marker-arrowhead:hover {
  fill: #888;
}

.link.joint-theme-default .marker-vertex {
  fill: #AAA;
}
.link.joint-theme-default .marker-vertex:hover {
  fill: #888;
}

.link.joint-theme-default .marker-vertex-remove {
  fill: #FFF;
  transition: opacity 0.4s;
}
.link.joint-theme-default .marker-vertex-remove-area {
  fill: #333;
  transition: opacity 0.4s;
}

/* Resizer */

.resizer {
  position: absolute;
  pointer-events: auto;
  bottom: -5px;
  right: -5px;
  width: 20px;
  height: 20px;
}

/* Colors */
.color-indianred        {
 background: rgba(205,92,92,0.2)  url('../resources/images/icons/arrow-right.svg') no-repeat 2px 0 !important;
  border: 3px solid IndianRed !important;
  background-size: cover !important;
}

.color-red              {
 background:  rgba(255,0,0,0.2) url('../resources/images/icons/arrow-right.svg') no-repeat 2px 0 !important;
  border: 3px solid Red !important;
  background-size: cover !important;
}
.color-deeppink         {
 background:  rgba(255,20,147,0.2)  url('../resources/images/icons/arrow-right.svg') no-repeat 2px 0 !important;
  border: 3px solid DeepPink !important;
  background-size: cover !important;
}
.color-mediumvioletred  {
 background:  rgba(199,21,133,0.2)  url('../resources/images/icons/arrow-right.svg') no-repeat 2px 0 !important;
  border: 3px solid MediumVioletRed !important;
  background-size: cover !important;
}

.color-coral            {

 background:  rgba(255,127,80,0.2) url('../resources/images/icons/arrow-right.svg') no-repeat 2px 0 !important;
  border: 3px solid Coral !important;
  background-size: cover !important;
}
.color-orangered        {
 background:  rgba(255,69,0,0.2)  url('../resources/images/icons/arrow-right.svg') no-repeat 2px 0 !important;
  border: 3px solid OrangeRed !important;
  background-size: cover !important;
}
.color-darkorange       {
 background:  rgba(255,140,0,0.2)  url('../resources/images/icons/arrow-right.svg') no-repeat 2px 0 !important;
  border: 3px solid DarkOrange !important;
  background-size: cover !important;
}
.color-gold             {
 background:  rgba(255,215,0,0.2)  url('../resources/images/icons/arrow-right.svg') no-repeat 2px 0 !important;
  border: 3px solid Gold !important;

  background-size: cover !important;
}
.color-yellow           {
 background:  rgba(255,255,0,0.2)  url('../resources/images/icons/arrow-right.svg') no-repeat 2px 0 !important;
  border: 3px solid Yellow !important;
 
  background-size: cover !important;
 } 

.color-fuchsia          {
  background:  rgba(255,0,255,0.2) url('../resources/images/icons/arrow-right.svg') no-repeat 2px 0 !important;
  border: 3px solid Fuchsia !important;
  background-size: cover !important;
}
.color-slateblue        {
 background:  rgba(106,90,205,0.2)  url('../resources/images/icons/arrow-right.svg') no-repeat 2px 0 !important;
  border: 3px solid SlateBlue !important;
  background-size: cover !important;
}
.color-greenyellow      {
 background:  rgba(173,255,47,0.2)  url('../resources/images/icons/arrow-right.svg') no-repeat 2px 0 !important;
  border: 3px solid GreenYellow !important;
  background-size: cover !important;
}

.color-springgreen      {
 background:  rgba(0,255,127,0.2) url('../resources/images/icons/arrow-right.svg') no-repeat 2px 0 !important;
  border: 3px solid SpringGreen !important;
  background-size: cover !important;
}
.color-darkgreen        {
 background:  rgba(0,100,0,0.2)  url('../resources/images/icons/arrow-right.svg') no-repeat 2px 0 !important;
  border: 3px solid DarkGreen !important;
  background-size: cover !important;
}
.color-olivedrab        {
 background:  rgba(107,142,35,0.2)  url('../resources/images/icons/arrow-right.svg') no-repeat 2px 0 !important;
  border: 3px solid OliveDrab !important;
  background-size: cover !important;
}
.color-lightseagreen    {
 background:  rgba(32,178,170,0.2) url('../resources/images/icons/arrow-right.svg') no-repeat 2px 0 !important;
  border: 3px solid LightSeaGreen !important;
  background-size: cover !important;
}
.color-turquoise        {
 background:  rgba(64,224,208,0.2) url('../resources/images/icons/arrow-right.svg') no-repeat 2px 0 !important;
  border: 3px solid Turquoise !important;
  background-size: cover !important;
}
.color-steelblue        {
 background:  rgba(70,130,180,0.2) url('../resources/images/icons/arrow-right.svg') no-repeat 2px 0 !important;
  border: 3px solid SteelBlue !important;
  background-size: cover !important;
}
.color-deepskyblue      {
 background:  rgba(0,191,255,0.2) url('../resources/images/icons/arrow-right.svg') no-repeat 2px 0 !important;
  border: 3px solid DeepSkyBlue !important;
  background-size: cover !important;
}
.color-royalblue        {
 background:  rgba(65,105,225,0.2) url('../resources/images/icons/arrow-right.svg') no-repeat 2px 0 !important;
  border: 3px solid RoyalBlue !important;
  background-size: cover !important;

}
.color-navy             {
 background:  rgba(0,0,128,0.2)  url('../resources/images/icons/arrow-right.svg') no-repeat 2px 0 !important;
  border: 3px solid Navy !important;
  background-size: cover !important;

}
           
